<template>
  <div class="top">
    <!--服务详情banner-->
    <div class="serviced_banner" >
      <img v-lazy="baseURL + detail.serveImg" :key="detail.serveImg"/>
      <div class="serviced_banner_main cl">
        <div class="serviced_banner_text">
          <h1 class="color-white fwei-nor inline-block" >{{detail.serveName}}</h1>
          <h4 class="color-white fwei-nor inline-block" >{{detail.serveSlogan}}</h4>
        </div>
      </div>
    </div>
    <!--app服务介绍-->
    <div class="serviced_intro " v-for="item in preview" v-if="item.type === 0">
      <section class="mt-40" :style="{background: 'url(' + baseURL + item.introduceImg + ') center right no-repeat'}">
        <aside>
          <h3 class="f20 pt-50 fwei-nor" v-text="item.introduceTitle"></h3>
          <p class="f14 mt-45" v-text="item.introduceRemark"></p>
        </aside>
      </section>
    </div>
    <!--您想要的APP 我们都能定制-->
    <section class="serviced_made mt-40" v-if="preview.length > 0">
      <div class="made_container pt-45">
        <!--<h2 class="fwei-nor f24 text-c" v-text="serve_item_title"></h2>-->
        <ul class="mt-40 cl">
          <li v-for="item in preview" v-if="item.type === 1">
            <img v-lazy="baseURL + item.introduceImg" :key="item.introduceImg"/>
            <p class="mt-30 mb-40" v-text="item.introduceTitle"></p>
          </li>
        </ul>
      </div>
    </section>
    <!--客户案例-->
    <section class="serviced_case"  v-loading="loadCase">
      <h2 class="fwei-nor f24 text-c mt-50 mb-40">客户案例</h2>
      <ul class="cl" v-if="caseData.length > 0">
        <li class="pr-10 pl-10" v-for="(item, index) in caseData" v-if="index < 5">
          <div class="pl-20 pr-20 pt-45 case_box">
            <img v-lazy="baseURL + item.caseMinImg[0]"  :key="item.caseMinImg[0]"/>
            <p class="mt-40 text-l f14 mb-110">{{item.caseIntroduce}}</p>
            <router-link :to="'case-detail?id=' + item.caseId"
               class="serviced_case_box pl-20 pr-20 inline-block center" :style="{'background': item.caseBgColor}">
              <img class="mt-45" v-lazy="baseURL + item.caseHoverImg[0]" :key="item.caseHoverImg[0]" />
              <p class="mt-40 text-l f14 color-white" v-text="item.caseIntroduce"></p>
            </router-link>
          </div>
        </li>
      </ul>
      <p class="text-c mb-40 mt-20">
        <router-link to="case" class="f14">MORE>></router-link>
      </p>
    </section>
    <Footer @goDetails="goDetails"/>
  </div>
</template>

<script>
import detailJs from './detailJs'
export default detailJs
</script>

<style scoped>

</style>
